<template>
	<view class="container">
		<z-paging ref="paging" :auto='true' bg-color="#F5F5F5" class="zpaing" v-model="dataList" @query="getDataList">
			<view slot="top">
				<u-navbar title="线下课程" :autoBack='true' :placeholder="true">
					<view class="u-nav-slot" slot="right" @tap="goto('pages/home/course/signUp')">
						<text>已报名</text>
					</view>
				</u-navbar>
				<view class="tabsCon">
					<u-tabs :list="tabList" lineColor="#FF8D1A" :activeStyle="{
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"></u-tabs>
				</view>
			</view>
			<view class="zPagingLoad" slot="loading">
				<u-loading-icon size="25"></u-loading-icon>
			</view>
			<view class="listCon">
				<view class="itemCon" @tap="goto('pages/home/course/courseDeatil')" v-for="(item,index) in dataList"
					:key="index">
					<view class="itemDiv">
						<image src="/static/images/zfb.png" mode=""></image>
						<view class="rightCon">
							<view class="one">
								<view class="type">
									<text>分类一</text>
								</view>
								<text class="fontWeight">肩颈按摩手法技巧</text>
							</view>
							<view class="rightP">
								<text class="greyP">东莞市南城街道黄金路A栋1001号</text>
							</view>
							<view class="two">
								<text class="greyP">2025-8-21 18:00</text>
								<view class="price">
									<text>￥</text>
									<text class="priceNumber">280.00</text>
								</view>
							</view>
						</view>
					</view>
					<view class="btnCon">
						<view class="btn1">
							<text>报名</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import baseMixin from "@/mixin/baseMixin.js"
	export default {
		mixins: [baseMixin],
		data() {
			return {
				dataList: [],
				tabList: [{
					name: '全部',
				}, {
					name: '分类一',
				}, {
					name: '分类二'
				}, {
					name: '分类三'
				}, {
					name: '分类四'
				}, {
					name: '分类五'
				}]
			};
		},
		methods: {
			getDataList(pageNo, pageSize) {
				this.$refs.paging.complete([{},
					{},
					{},
					{},
				]);
				// let params = {
				// 	pageNo: pageNo,
				// 	pageSize: pageSize
				// }
				// this.fnTestList(params).then((res) => {
				// 	this.$refs.paging.complete(res.rows);
				// })
			},
		}
	};
</script>

<style lang="scss" scoped>
	
	.fontWeight{
		font-weight: bold;
	}
	
	.greyP {
		color: rgba(152, 160, 166, 1);
	}
	
	.container {
		position: relative;

		.listCon {
			padding: 0 24rpx 0 24rpx;

			.itemCon {
				border-radius: 24rpx;
				background: rgba(255, 255, 255, 1);
				padding: 24rpx;
				margin-top: 24rpx;
			}

			.itemDiv {
				display: flex;
				align-items: center;
				font-size: 24rpx;

				image {
					width: 128rpx;
					height: 128rpx;
					border-radius: 16rpx;
				}

				.rightCon {
					margin-left: 16rpx;
					flex: 1;

					.one {
						display: flex;
						align-items: center;
						font-size: 28rpx;

						.type {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 68rpx;
							height: 32rpx;
							border-radius: 8rpx;
							background: rgba(68, 212, 168, 0.12);
							color: $theme-color;
							margin-right: 4rpx;
							font-size: 20rpx;
						}
					}

					.rightP {
						margin: 8rpx 0;
						height: 36rpx;
					}

					.two {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.price {
							display: flex;
							font-size: 20rpx;
							color: rgba(255, 140, 64, 1);
							font-weight: 500;
							line-height: 0;

							.priceNumber {
								font-size: 28rpx;
							}
						}

					}
				}
			}

			.btnCon {
				display: flex;
				justify-content: flex-end;
				margin-top: 18rpx;

				.btn1 {
					border-radius: 24rpx;
					background: $theme-color;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 112rpx;
					height: 48rpx;
					font-size: 28rpx;
					color: #fff;
				}
			}
		}
	}
	
	.tabsCon{
		background-color: #fff;
	}
</style>